<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="author" content="yb">
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="Expires" content="0">
    <!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../style/css/base.css">
    <script type="text/javascript">
    $(function(){
        //参考：可以通过跨域方式获取其他服务器的当前时间作为服务器当前时间
        var oCity="北京"; //设置城市
        $.ajax({
            type:"GET", //默认是GET
            url:"http://api.map.baidu.com/telematics/v3/weather?location=" + oCity + "&output=json&ak=ohA7QHfg0BBrpiY4kyuIAAsD",
            dataType:"jsonp",
            success:function(data){
              //alert(data.date);
            },
            error:function(jqXHR){
              //alert("信息错误" + jqXHR.status);
            }
        })        
    })
    </script>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
        }
    .center{
        width: 100%;
        text-align: center;
        padding-top: 15%;
        background-color: #fff;
        position: relative;
        z-index: 9;
    }
    .center_img{
        width: 100%;
        text-align: center;
        background-color: #fff;
        position: relative;
        top: -60px;
    }
    </style>
</head>
<body id="bodyId">
    <div class="center">
        <h2>放假！放假！放假！</h2>
    </div>
    <div class="center_img">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556621362512&di=3d1d9474e8cd3ce69183b67e8021f180&imgtype=0&src=http%3A%2F%2Fimg.gifhome.com%2Fgif%2Femoji%2F2018%2Ff1044dda55fb47309c476e26dc59128a.gif" alt="">
        
        <h1>距离五一放假还有：</h1>
        <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div> 
    </div>
        <script type="text/javascript">
            $(function(){
                var now=new Date();
                var end=new Date(2019,3,30,18,00,00);//结束的时间：年，月，日，分，秒（月的索引是0~11）
                console.log(now,end)
                /*两个时间相减,得到的是毫秒ms,变成秒*/
                var result=Math.floor(end-now)/1000; 
                console.log(result)
                
                var interval=setInterval(sub,1000); //定时器 调度对象
                /*封装减1秒的函数*/
                function sub(){
                    if (result>1) {
                       result = result - 1; 
                       var second = Math.floor(result % 60);     // 计算秒 ，取余  
                       var minite = Math.floor((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒
                       var hour = Math.floor((result / 3600) % 24); //计算小时，换算有多少小时，取余，24小时制除以24，余出多少小时
                       var day = Math.floor(result / (3600*24));  //计算天 ，换算有多少天
                     
                       $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
                    } else{
                        alert("倒计时结束！");
                        window.clearInterval(interval);//这里可以添加倒计时结束后需要执行的事件 
                    }
                };
            });
        </script>
</body>
</html>